<template>
    <div class="w-100% h-100% bgModule">
        <div>
            <module-title title="智慧学校"/>
        </div>
        <div class="flex">
            <div class="flex-1"
                 v-for="(item, index) in cdata.list" :key="index">
                <div class="h-780px">
                    <chart :cdata="item"/>
                </div>
                <div class="text-12px c-#fff text-center mt-2px">{{ item.name }}</div>
            </div>
        </div>

    </div>
</template>

<script lang="ts" setup>
import {reactive, ref, nextTick} from "vue";
import Chart from './chart';
import ModuleTitle from '@/components/ModuleTitle.vue';

const cdata = reactive({
    list: [
        {
            name: '班级多媒体设备',
            value: 35,
            goal: 61
        },
        // {
        //     name: '同频互动学校',
        //     value: 16,
        //     goal: 47
        // },
        // {
        //     name: '同频互动学校',
        //     value: 16,
        //     goal: 47
        // },
    ],

})


</script>

<style lang="scss" scoped>
:deep(.n-tabs .n-tabs-nav-scroll-content) {
  justify-content: center;
}

:deep(.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-pad) {
  //width: 0!important;
  flex-grow: 0;
}

.bgModule {
  background-image: url("@/assets/images/bg-box.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 11px 13px;
}
</style>
